import { FC, useEffect, useRef, useState } from "react"
import Taro, { useRouter } from '@tarojs/taro'
import avatar from '../../resource/avatar2.png'
import phone from '../../resource/phone.png'
import style from './style.less'

const Details: FC = () => {
  const router = useRouter()
  const cargoId = useRef(router.params.cargoId)

  const [cargo, setCargo] = useState<any>({})
  const [shipper, setShipper] = useState<any>({})

  useEffect(() => {
    Taro.request({
      url: 'http://139.9.123.88:8083/fta-trade/order/driver/preCreatOrder',
      method: 'POST',
      data: JSON.stringify({
        cargoId: cargoId.current,
        openId: Taro.getStorageSync('token'),
      }),
      success: (data) => {
        console.log(data);
        setCargo(data.data.data.cargoOrderDTO)
        setShipper(data.data.data.shipperOrderDTO)
      },
      fail: () => {
        Taro.showToast({
          title: '请求错误',
          icon: 'none',
          duration: 1500
        })
      }
    })

  }, [])

  const confirmGrab = () => {
    Taro.showModal({
      title: '提示',
      content: cargo?.needReturnDeposit ? '订金支付到平台用于订货押金，货主收货后，会自动退还给您。' : '本单订金不退还，货主确认收货后将自动转入货主账号。',
      success: function (res) {
        if (res.confirm) {
          Taro.navigateTo({ url: `/packageC/payment/index?cargoId=${cargoId.current}` })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }

  return (
    <div className={style.root}>
      <div className="title">{cargo?.loadTime} 前可装</div>
      <div className="address">
        <div className="zhuang">装</div>
        <div className="xie">卸</div>
        <div className="start">{cargo?.loadAddress}</div>
        <div className="end">{cargo?.unloadingAdress}</div>
        <div className="distance">预估运输里程 <i>{cargo?.mileage} 公里</i></div>
      </div>
      <div className="info">
        <div className="info-title">车货信息</div>
        <div className="info-container">
          <div>车辆</div>
          <div>{cargo?.truckLength}米 {cargo?.truckType}</div>
        </div>
        <div className="info-container">
          <div>货物</div>
          <div>{cargo?.cargoName}，{cargo?.truckWeight}吨，{cargo?.cargoCapacipy}方，{cargo?.packingType}</div>
        </div>
      </div>
      <div className="payment">
        <div className="payment-title">支付信息</div>
        <div className="payment-container">
          <div>总运费</div>
          <div><i style={{ color: '#EF9353', fontSize: Taro.pxTransform(32) }}>{cargo?.cargoFee}</i> 元/趟</div>
        </div>
        <div className="payment-container">
          <div>订金</div>
          <div><i style={{ color: '#EF9353', fontSize: Taro.pxTransform(32) }}>{cargo?.deposit}</i> 元{cargo?.needReturnDeposit ? '（退还）' : '（不退还）'}</div>
        </div>
        <div className="payment-container">
          <div>担保说明</div>
          <div className="payment-item">{cargo?.needReturnDeposit ? '订金支付到平台用于订货押金，货主确认收货后，将返还给您' : '订金支付到平台用于订货押金，货主确认收货后，将支付给货主'}</div>
        </div>
      </div>
      <div className="tips"><i className="tips-i">*</i> 支付订金完成后，将向货主发起 <i style={{ color: '#EF9353' }}>货物运输协议</i> 双方均签订完协议后，则视为抢单成功</div>
      <div className="owner">
        <img src={avatar} alt="" />
        <div>{shipper?.userName ? shipper.userName[0] : ''}老板<i style={{ display: shipper?.isMembership ? 'inline-block' : 'none' }}>尊享会员</i></div>
        <div>交易79 | 发货458 | 好评率98%</div>
        <img src={phone} alt="" onClick={() => { Taro.makePhoneCall({ phoneNumber: shipper.telephone }) }} />
      </div>
      <div className="grab">
        <div>订金：<i>{cargo?.deposit}</i> 元{cargo?.needReturnDeposit ? '（退还）' : '（不退还）'}</div>
        <div onClick={confirmGrab}>立即抢单</div>
      </div>
    </div>
  )
}

export default Details